<template>
  <el-card header="联系人信息" class="form-section">
    <el-form-item label="联系人姓名" prop="contact_name">
      <el-input
        v-model="formData.contact_name"
        placeholder="请输入联系人姓名"
        clearable
        @focus="handleFocus"
        @blur="handleBlur"
      />
    </el-form-item>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="联系电话" prop="contact_phone">
          <el-input
            v-model="formData.contact_phone"
            placeholder="请输入联系电话"
            clearable
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="formData.email"
            placeholder="请输入邮箱地址"
            clearable
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => ({}),
    },
  })

  const emit = defineEmits(['change'])

  // 直接使用props.modelValue，避免尝试重新赋值整个对象
  const formData = computed(() => props.modelValue)

  // 防止标签点击事件标记
  const isLabelClicked = ref(false)

  // 处理标签点击事件
  const handleLabelClick = () => {
    console.log('联系人信息标签被点击，标记为标签点击')
    isLabelClicked.value = true

    // 延迟重置标记，给其他事件时间处理
    setTimeout(() => {
      isLabelClicked.value = false
    }, 100)
  }

  // 处理控件聚焦事件
  const handleFocus = (event: any) => {
    console.log('联系人信息控件聚焦事件', event)
    if (isLabelClicked.value) {
      console.log('标签点击引起的联系人控件聚焦事件，已屏蔽')
    }
  }

  // 处理控件失焦事件
  const handleBlur = (event: any) => {
    console.log('联系人信息控件失焦事件', event)
  }
</script>

<style scoped>
  .form-section {
    margin-bottom: 20px;
  }

  /* 防止标签点击的样式方案 */
  :deep(.el-form-item__label) {
    cursor: default;
    user-select: none;
  }

  /* 输入框标签样式 */
  :deep(.el-input .el-input__inner) {
    user-select: none;
  }
</style>
